<template>
  <div>
    <!-- header部分 -->
    <nav-title title="已办事项" routerLink="index"/>
    <div class="search">
      <input class="search-input" type="text" placeholder="请输入搜索关键字" v-model="searchText2">
      <img class="search-img" src="./images/search.png" alt="" @click="getDoneListInfo">
    </div>
    <ul>
      <li v-for="(doneItem,index) in doneList">
        <div class="neirong" @click="goToCheck(doneItem.cWfType,doneItem.cTransactionNbr)">
          <div class="yuan0" v-if=" index%4 == 0 "></div>
          <div class="yuan1" v-if=" index%4 == 1 "></div>
          <div class="yuan2" v-if=" index%4 == 2 "></div>
          <div class="yuan3" v-if=" index%4 == 3 "></div>
          <div class="con content-todo clearfix">{{doneItem.text254}}</div>
          <div class="operation">
            <!-- 根据cwfstatus来判断，A:已批准  B:已驳回  C:已撤单  D；已拒绝  P:审批中 S: 已保存 -->
            <img v-if="doneItem.cWfStatus == 'A'" class="process-img" src="./images/process/01.png" alt="">
            <img v-if="doneItem.cWfStatus == 'B'" class="process-img" src="./images/process/02.png" alt="">
            <img v-if="doneItem.cWfStatus == 'C'" class="process-img" src="./images/process/03.png" alt="">
            <img v-if="doneItem.cWfStatus == 'D'" class="process-img" src="./images/process/04.png" alt="">
            <img v-if="doneItem.cWfStatus == 'P'" class="process-img" src="./images/process/05.png" alt="">
            <img v-if="doneItem.cWfStatus == 'S'" class="process-img" src="./images/process/06.png" alt="">
          </div>
          <div class="clearfix timer">
            <div class="con time fl" style="height: 25px;">{{doneItem.cWfLastupddttm|dateFormat2}}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import vHeader from '../../components/header'
import { getDoneList } from '../../api/api'
import { json2Form } from '../../util/http'

export default {
  components: {
    vHeader
  },
  mounted() {
    //已办事项列表
    this.getDoneListInfo()
  },
  data() {
    return {
      searchText2: '', //搜索已审批
      doneList: [] //已审批
    }
  },
  methods: {
    getDoneListInfo() {
      let params = {
        queryKey: this.searchText2
      }
      getDoneList(params)
        .then(res => {
          if (res && res.retCode === '000000') {
            this.doneList = res.retData
          } else {
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
    },
    goToCheck(cwfType, cTransactionNbr) {
      //当流程类型判断
      if (cwfType == 'DMC') {
        this.$router.push({
          name: 'Compensate',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'HIR') {
        this.$router.push({
          name: 'Employment',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'LOF') {
        this.$router.push({
          name: 'Dissolution',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'PRC') {
        this.$router.push({
          name: 'FormalShow',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'TER') {
        this.$router.push({
          name: 'WastageShow',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'TOL') {
        this.$router.push({
          name: 'Handover',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'CER') {
        this.$router.push({
          name: 'proveModify',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'XFR') {
        this.$router.push({
          name: 'Mobilization',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      } else if (cwfType == 'MOD') {
        this.$router.push({
          name: 'InfoModify',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      }else if(cwfType == 'DRFT'){
        this.$router.push({
          name: 'Employment',
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: '1'
          }
        })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.search {
  position: relative;
  .search-input {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 90%;
    margin: 8px 0;
    padding-left: 5px;
    text-align: left;
    border-radius: 3px;
    border: 2px solid #f5f5f5 !important;
  }
  .search-img {
    position: absolute;
    top: 11px;
    right: 5%;
    margin-right: 10px;
  }
}

ul li:first-child {
  margin-top: -26px;
}
ul {
  margin-top: 20px;
  margin-left: 10px;
  padding-bottom: 20px;
  clear: both;
  height: auto;
  overflow: hidden;
  background: url(../userInfo/image/rongyu_bg.jpg) 15px 50px repeat-y;
  .timer {
    margin-top: 22px;
    .time {
      font-size: 13px;
      color: #9b9b9b;
    }
  }
  li {
    clear: both;
    height: 100%;
    clear: both;
    padding-top: 22px;
    cursor: default;
    .neirong {
      position: relative;
      .operation {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -5px;
        .process-img {
          width: 60px;
          height: 54px;
        }
      }
    }
  }
  .con {
    text-align: left;
    margin-left: 24px;
    line-height: 25px;
  }
  .content-todo {
    width: 80%;
    color: #333;
    font-size: 14px;
    font-weight: 700;
  }
  .yuan0 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #07bc4b;
  }
  .yuan1 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16a8e7;
  }
  .yuan2 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6633;
  }
  .yuan3 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffff00;
  }
}
</style>
